<template>
    <button :class="[classObj,size,color]"
            :style="style"
            :type="htmlType"
            @click="clickHandler">
        <div style="display: flex;justify-content: center;
        align-items: center;height: 100%;padding: 0 18px;font-size: 14px">
            <slot name="icon"/>
            <slot/>
        </div>
    </button>
</template>

<script>
    export default {
        name: 'CustomBtn',
        props: {
            to: {
                type: String,
            },
            type: {
                type: String,
            },
            htmlType: {
                type: String,
                default: 'text',
            },
            size: {
                type: String,
            },
            color: {
                type: String,
            },
        },
        data () {
            return {

            };
        },
        computed: {
            style () {
                if (this.type==='block') {
                    return {
                        width: '100%',
                    };
                }
                return {};
            },
            classObj () {
                return {
                    mano_btn: true,
                };
            },
        },
        methods: {
            clickHandler () {
                this.$emit('click');
            },
        },

    };
</script>

<style scoped lang="scss">
    .mano_btn {
        width: max-content;
        border: 1px solid #D8DCE6;
        color: #3E3F42;
        background: linear-gradient(#FFF, #F6F7F9);
        height: 38px;
        border-radius: 4px;
        box-shadow: 0 1px 1px rgba(22, 29, 37, 0.05);
        transition: all 0.3s;
        cursor: pointer;
        outline:none;

        &.green {
             background: linear-gradient(#38B249, #34AA44);
             color: #FFF;
             border: 1px solid #2D9C3C;
             &:hover{
                 background: linear-gradient(#38B249,#34AA44);
             }
         }
        &.blue {
            background: linear-gradient(#1F6FE5,#1665D8);
            color: #FFF;
            border: 1px solid #1461D2;
            &:hover{
                background: linear-gradient(#1F6FE5,#1665D8);
            }
        }

        &:hover {
            background: linear-gradient(#FFFFFF,#EDEDED);
        }
        &.block{
            width: 100%;
            transition: all 0.3s;
        }


    }
</style>
